<template>
  <div class="WxOrder-Page">
    <div class="nav"> <a id="el">&nbsp;＜</a>｜ 我的订单
      <el-dropdown @command="handleCommand" class="a">
  <span class="el-dropdown-link"><i class="el-icon-more el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">联系卖家</el-dropdown-item>
          <el-dropdown-item command="b">商品投诉</el-dropdown-item>
          <el-dropdown-item command="c">帮助中心</el-dropdown-item>
          <el-dropdown-item command="d">安全退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待付款" name="first">
          <table border="1" style="color: black" width="100%">
            <!--<tr>-->
              <!--<td><img src="../../assets/22.jpg" alt=""></td>-->
              <!--<td>商品详情：XXX</td>-->
              <!--<td>收货地址：XXX</td>-->
              <!--<td><a style="color: blue">确定付款</a> &nbsp;<a style="color: blue">取消付款</a></td>-->
            <!--</tr>-->
            <tr>
              <td>11111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
            </tr>
            <tr>
              <td>1</td>
              <td>11</td>
              <td>113333333333333333333333333333333333333333333333333333333333333</td>
              <td>1</td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="second">
          <table class="user1">
            <tr>
              <td><img src="../../assets/29.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
              <td><a style="color: blue">提醒卖家发货</a></td>
            </tr>
          </table>
          <table class="user1">
            <tr>
              <td><img src="../../assets/29.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
              <td><a style="color: blue">提醒卖家发货</a></td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="待收货" name="third">
          <table class="user1">
            <tr>
              <td><img src="../../assets/30.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
              <td><a style="color: blue">确认收货</a></td>
            </tr>
          </table>
          <table class="user1">
            <tr>
              <td><img src="../../assets/30.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
              <td><a style="color: blue">确认收货</a></td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="我的全部订单" name="fourth">
          <table class="user1">
            <tr>
              <td><img src="../../assets/22.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
            </tr>
          </table>
          <table class="user1">
            <tr>
              <td><img src="../../assets/22.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
            </tr>
          </table>
          <table class="user1">
            <tr>
              <td><img src="../../assets/29.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
            </tr>
          </table>
          <table class="user1">
            <tr>
              <td><img src="../../assets/29.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
            </tr>
          </table>
          <table class="user1">
            <tr>
              <td><img src="../../assets/30.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
            </tr>
          </table>
          <table class="user1">
            <tr>
              <td><img src="../../assets/30.jpg" alt=""></td>
              <td>商品详情：XXX</td>
              <td>收货地址：XXX</td>
            </tr>
          </table>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>
<script>
  export default {
    name: 'WxOrder',
    data() {
      return {}
    },
    data() {
      return {
        activeNames: ['1']
      }
    },
    data() {
      return {
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>
<style lang="less">
  .WxOrder-Page {
    min-width: 320px;max-width:1024px ;
    height: 100%;margin: auto;
  }
  #el{
    height: 50px;
    width: 20px;
    float: left;
    background-color:olivedrab;
    color: aliceblue;
    border: 0px;
  }
  .a{
    float: right;margin-right: 15px;
  }
  .nav{height: 50px;
    width:100%;
    font-size: 12px;
    background-color: olivedrab;
    line-height: 50px;
    color: aliceblue;
    position: fixed;
  }
  .user1{
    color: black;width: 100%;margin-top: 5px;background-color: beige;
  }
  img{
    width: 70px;height: 70px;
  }
  table{
    border-collapse: collapse;table-layout: fixed;
  }
  td{
    text-overflow: clip;overflow: scroll;
  }
</style>

